.formula-box {
    display: flex;

    box-sizing: border-box;
    height: 28px;

    background: rgb(var(--bg-color-secondary));
    border-bottom: 1px solid rgb(var(--border-color));

    transition: height 0.15s;

    .name-ranges {
        box-sizing: border-box;
        width: 100px;
        height: 100%;
        position: relative;
    }

    .formula-bar {
        display: flex;
        width: 100%;
        height: 100%;

        .formula-icon {
            padding: 6px 0;

            &-disable {
                color: rgb(var(--grey-200));
                cursor: not-allowed;
            }

            &-wrapper {
                position: relative;

                display: flex;
                // gap: var(--margin-xs);
                align-items: center;
                justify-content: center;

                box-sizing: border-box;
                width: 80px;
                height: 100%;

                font-size: var(--font-size-xs);

                border-right: 1px solid rgb(var(--border-color));

                .icon-container {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    padding: var(--padding-xs);

                    font-size: var(--font-size-lg);

                    border-radius: var(--border-radius-base);

                    &-success {
                        &.formula-active {
                            cursor: pointer;
                            color: rgb(var(--success-color));
                            &:hover {
                                background-color: rgb(var(--grey-50));
                            }
                        }
                    }

                    &-error {
                        &.formula-active {
                            cursor: pointer;
                            color: rgb(var(--error-color));
                            &:hover {
                                background-color: rgb(var(--grey-50));
                            }
                        }
                    }

                    &-fx {
                        cursor: pointer;
                        &:hover {
                            background-color: rgb(var(--grey-50));
                        }
                    }
                }
            }
        }

        .formula-input {
            overflow: hidden;
            display: flex;
            flex: 1;

            width: 100%;
            padding: 0 0 0 10px;

            .formula-content {
                position: relative;

                width: 100%;
                height: 100%;

                word-wrap: break-word;

                outline: none;
            }

            .arrow-container {
                cursor: pointer;

                display: flex;
                align-items: center;
                justify-content: center;

                width: 20px;
                height: 100%;

                font-size: var(--font-size-xs);
                color: rgb(var(--text-color-secondary));

                &-disable {
                    color: rgb(var(--grey-200));
                    cursor: not-allowed;
                }
            }
        }
    }
}
